<template>
  <div class="plan-item" >
    <div class="">
    <div class="item" :class="{other:item.id%2===0}">
      <div class="left">
<!--        <span class="mon">{{getMonth(item.startDate)}}</span>-->
        <span class="mon">计划</span>
      </div>
      <div class="center">
<!--        <span class="date">{{parseTime(item.startDate)}}-{{parseTime(item.endDate)}}</span>-->
        <span class="date">{{item.title}}</span>
        <span class="desc">药店拜访  促销活动  试用装发放</span>
      </div>
      <div class="right">
        <span class="iconfont iconarrow_right"></span>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import { parseTime, getMonth } from '../../util/time'

export default {
  props: {
    item: Object
  },
  methods: {
    parseTime (date) {
      return parseTime(date, '{y}.{m}.{d}')
    },
    getMonth (date) {
      return getMonth(date)
    }
  },
  data () {
    return {

    }
  }
}
</script>

<style scoped lang="stylus">
.plan-item
  padding-top 10px
  .item
    padding 0 9px
    height: 75px;
    background: rgba(255, 255, 255, 1);
    box-shadow:0px 3px 7px 0px rgba(89,88,87,0.52);
    border-radius: 10px;
    overflow hidden
    display flex
    align-items center
    justify-content space-between
    margin-bottom 8px
    .left
      display flex
      align-items center
      justify-content center
      width: 38px;
      height: 38px;
      background: rgba(249, 165, 40, 1);
      border-radius: 50%;
      flex 0 0 38px
      dpr-font(11px)
      font-weight: bold;
      color: rgba(255, 255, 255, 1);

    .center
      padding-left 15px
      flex 1
      display flex
      flex-direction column
      justify-content center
      justify-items flex-start
      overflow hidden
      .date
        dpr-font(18px)
        color: rgba(85, 84, 93, 1);
        white-space nowrap
        overflow hidden
        text-overflow ellipsis

      .desc
        margin-top 8px
        font-size: 11px;
        color: rgba(85, 84, 93, 1);
        opacity: 0.49;

    .right
      width: 18px;
      display flex
      align-items center
      justify-content center
      .iconfont
        color #B9B7C0
        dpr-font(12px)
        width 6px
    &.other
      .left
        background-color #598EFE
    &.done
      background-color #ECEAEA
      .left
        background-color #B9B7C0
</style>
